<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="Demo_files/bootstrap.css" rel="stylesheet">
    <link href="Demo_files/bootstrap-theme.css" rel="stylesheet">
    <link rel="stylesheet" href="Demo_files/ol.css" type="text/css">

</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-basepage">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand">GIS-PKU</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse-basepage">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">图层选择<span
                            class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li onclick="onVector()"><a href="#">矢量图层</a></li>
                            <li onclick="onImage()"><a href="#">影像图层</a></li>
                            <li onclick="onCanteen()"><a href="#">北大食堂</a></li>
                            <li data-toggle="modal" data-target="#poi_modal"><a href="#">武汉餐饮</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <p class="navbar-text">欢迎你&nbsp;&nbsp;<span id="base_name">北京大学的朋友</span></p>
                    </li>
                    <li><a>注册</a></li>
                    <li><a>登录</a></li>
                </ul>
            </div>

        </div>
    </nav>

    <header id="header-base">
        <hr>
        <hr>
    </header>

    <div class="col-md-12">
        <div class="row">
            <div id="container">
                <div id="map" class="map" style="height: 90%">
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="poi_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                    <h4 class="modal-title" id="myModalLabel">
                        POI查询管理
                    </h4>
                </div>
                <div class="modal-body">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active"><a href="#search_by_location" data-toggle="tab">邻近查询</a></li>
                        <li><a href="#add_point" data-toggle="tab">添加点</a></li>
                        <li><a href="#search_by_id" data-toggle="tab">ID查询</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="search_by_location">
                            <div class="row" style="margin-bottom: 5px">

                                <div class="col-md-4">
                                    <label for="input_search_longitude" class="control-label">经度(十进制度)</label>
                                    <input type="number" id="input_search_longitude">
                                </div>
                                <div class="col-md-4">
                                    <label for="input_search_latitude" class="control-label">纬度(十进制度)</label>
                                    <input type="number" id="input_search_latitude">
                                </div>
                                <div class="col-md-4">
                                    <label for="input_search_radius" class="control-label">距离(米)</label>
                                    <input type="number" id="input_search_radius">
                                </div>
                            </div>

                        </div>
                        <div class="tab-pane fade" id="add_point">
                            <div class="row" style="margin-bottom: 5px">
                                <div class="col-md-4">
                                    <label for="input_poi_id" class="control-label">ID(不可重复)</label>
                                    <input type="number" id="input_poi_id">
                                </div>
                                <div class="col-md-4">
                                    <label for="input_poi_longitude" class="control-label">经度(十进制度)</label>
                                    <input type="number" id="input_poi_longitude">
                                </div>
                                <div class="col-md-4">
                                    <label for="input_poi_latitude" class="control-label">纬度(十进制度)</label>
                                    <input type="number" id="input_poi_latitude">
                                </div>
                            </div>

                        </div>

                        <div class="tab-pane fade" id="search_by_id">
                            <div class="row" style="margin-bottom: 5px">
                                <div class="col-md-4">
                                    <label for="input_search_id" class="control-label">ID</label>
                                    <input type="number" id="input_search_id">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="btn-draw" type="button" class="btn btn-primary" data-dismiss="modal" onclick="poiRun()">
                        运行
                    </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer" role="contentinfo">
        <hr>
        <div class="container">
            <p class="text-center"><strong>GIS-PKU</strong></p>

            <p class="text-center">©All rights reserved</p>
            <h5 class="text-center"> Powered by&nbsp;<a href="">Vivienfanghua</a></h5>
        </div>
    </footer>
    <script src="Demo_files/jquery.js"></script>
    <script src="Demo_files/bootstrap.js"></script>
    <script src="Demo_files/polyfill.js"></script>
    <script src="Demo_files/ol.js"></script>

    <script>
        var layers = {};
        var pointFeatures = [];
        layers['road'] = new ol.layer.Tile({
            visible: true,
            source: new ol.source.OSM()
        });
        layers['satellite'] = new ol.layer.Tile({
            visible: false,
            source: new ol.source.XYZ({
                url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
            })
        });
        layers['points'] = new ol.layer.Vector({
            source: new ol.source.Vector({ features: pointFeatures })
        });
        var map = new ol.Map({
            layers: [layers['road'], layers['satellite'], layers['points']],
            loadTilesWhileInteracting: true,
            target: 'map',
            view: new ol.View({
                center: [114.185933, 30.530495],
                zoom: 10,
                projection: 'EPSG:4326'
            })
        });

        function onVector() {
            //            layers['satellite'].setVisible(false);
        }

        function onImage() {
            //            layers['satellite'].setVisible(true);
        }

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onload = function () {
            var format = new ol.format.GML3();
            var xmlDoc = xmlhttp.responseXML;
            vector = new ol.layer.Vector({
                source: new ol.source.Vector({
                    format: format
                })
            });

            for (var i = 1; i < xmlDoc.children[0].children.length; i++) {
                var features = format.readFeatures(xmlDoc.children[0].children[i], {
                    featureProjection: 'EPSG:4326'
                });
                vector.getSource().addFeature(features);
            }

            map.addLayer(vector);
            map.getView().fit(vector.getSource().getExtent(), map.getSize())
        };
        var url = 'http://162.105.17.101/cgi-bin/mapserv?map=/home/vivien/wfs.map&service=WFS&' +
            'version=1.1.0&request=GetFeature&typename=canteen&' +
            'format_options=callback:loadFeatures';

        function onCanteen() {
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }

        function onWuhan() {

        }

        function poiRun() {
            if ($("#search_by_location").hasClass("active")) {
                var longitude = $("#input_search_longitude").val();
                var latitude = $("#input_search_latitude").val();
                var radius = $("#input_search_radius").val();
                $.get('http://127.0.0.1:10000/within', { lon: longitude, lat: latitude, radius: radius }, function (content) {
                    var points = eval(content);
                    // layers['points'] = new ol.layer.Vector({
                    //     source: new ol.source.Vector({ features: pointFeatures })
                    // });
                    for (var i in points) {
                        var feature = new ol.Feature({ geometry: new ol.geom.Point(points[i][2]) });
                        layers['points'].getSource().addFeature(feature);
                    }
                });
            }
            else if ($("#search_by_id").hasClass("active")) {

            }
            else if ($("#add_point").hasClass("active")) {

            }
        }

    </script>

</body>

</html>